 Ext.require(['*']);
Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    var viewport = Ext.create('Ext.Viewport', {
        id: 'border-example',
        layout: 'border',
        items: [
        	Ext.create('Ext.Component', {
				region : 'north',
				height : 100,
				autoEl : {
					tag : 'div',
					html : "<div id='grailsLogo' role='banner'><a href='www.northir.com'><img src='./images/grails_logo.png' alt='Grails'/></a></div>"
				}
			}),{
				region : 'west',
				stateId : 'navigation-panel',
				id : 'west-panel', // see Ext.getCmp() below
				title : 'West',
				split : true,
				width : 200,
				minWidth : 175,
				maxWidth : 400,
				collapsible : true,
				animCollapse : true,
				margins : '0 0 5 5',
				layout : 'accordion',
				items :[{
						contentEl : 'west',
						title : 'Navigation',
						iconCls : 'nav'
					},{
						title : 'Settings',
						html : '<p>Some settings in here.</p>',
						iconCls : 'settings'
					}]
			},
      		Ext.create('Ext.tab.Panel', {
            region: 'center', // a center region is ALWAYS required for border layout
            deferredRender: false,
            activeTab: 0,     // first tab initially active
            margins : '0 5 5 0',
            items: [{
                contentEl: 'center1',
                title: 'Close Me',
                closable: true,
                autoScroll: true
            }]
        })]
    });
});